<template>
	<view class="main orderDetails-main">
		<scroll-view class="scroll-wrap" scroll-y="true" @scroll="scroll">
			<view class="navigationBar-wrap" :style="'background: rgba(255,255,255,'+opacityStyle+');'">
				<NavigationBar title="订单详情" color="#fff" v-if="opacityStyle<1" />
				<NavigationBar title="订单详情" color="#333" v-if="opacityStyle==1"/>
			</view>
			<view class="order-content">
				<view class="top-wrap">
					<NavigationBar :showGoBack="false"/>
					<view class="status-wrap">
						<view class="status">待支付</view>
						<view class="status-desc">请尽快支付订单，超时将自动取消</view>
					</view>
				</view>
				<view class="box address-box">
					<view class="address-content" @click="jumpAddressAction">
						<text class="iconfont address-icon">&#xe606;</text>
						<view class="center">
							<view class="address">福建省厦门市思明区莲前街道小Q讲Office创想中心A座</view>
							<view class="name-phone">张三  18259715568</view>
						</view>
						<view class="flex-center">
							<text class="iconfont rigt-arrow-icon">&#xe60a;</text>
						</view>
					</view>
					<image class="shop_order_address-img" src="../../static/images/shop_order_address.png" ></image>
				</view>
				<view class="box goods-box">
					<view class="title b-b">订单内容</view>
					<view class="store-list">
						<view class="store-item b-b" v-for="(rItem,rIndex) in 3" :key="rIndex" @click="jumpDetailsAction">
							<view class="item-top">
								<text class="iconfont shop-icon">&#xe628;</text>
								<text class="store-name">东方药房</text>
							</view>
							<view class="item-center" v-for="(item,index) in 2" :key="index">
								<image class="avatar" src="https://zjjk-1255331212.cos.ap-beijing.myqcloud.com/ih/real/a7ae5cc302554953a7a86ff5bc93f901/20200723163129_aec21267-8bb7-52f5-2bc9-91f21e69d959.jpg" mode=""></image>
								<view class="goods-info">
									<view class="goods-info-row">
										<text class="name txt-overflow-s">小施专用脑残片{{rIndex}}</text>
										<text class="price">¥ 66.89</text>
									</view>
									<view class="goods-info-row">
										<text class="desc txt-overflow-m">凡是名字叫小施的都可以吃这款脑残片，而且比起其他人吃效果会更好</text>
										<text class="number">x1</text>
									</view>
								</view>
							</view>
							<view class="total">
								<text class="total-text">共2件 实付:</text>
								<text class="total-price">¥ 133.78</text>
							</view>
						</view>
					</view>
				</view>
				<view class="box amount-box">
					<view class="title b-b">订单金额</view>
					<view class="amount-list b-b">
						<view class="cell">
							<text>商品总价</text>
							<text>¥120.00</text>
						</view>
						<view class="cell">
							<text>运费</text>
							<text>平台包邮</text>
						</view>
						<view class="cell">
							<text>优惠券</text>
							<text>-¥5.00</text>
						</view>
					</view>
					<view class="amount-total">
						<text>共4件商品，总金额：</text>
						<text class="total-price">¥115.00</text>
					</view>
				</view>
				<view class="box order-box">
					<view class="cell b-b">
						<text>订单编号</text>
						<text>20191114223456789</text>
					</view>
					<view class="cell">
						<text>创建时间号</text>
						<text>2020-12-21  12:01</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer-wrap  b-t">
			<view class="buttom btn" @click="cancelAction()">
				<text class="text">取消订单</text>
			</view>
			<view class="primary-buttom btn" @click="paymentAction()">
				<text class="text">立即支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opacityStyle: 0
			};
		},
		methods: {
			scroll(e) {
				let _this = this
				let scrollTop = e.detail.scrollTop
				
				let opacityStyle = (scrollTop/150).toFixed(3)
				_this.opacityStyle = opacityStyle 
				if(opacityStyle > 1) {
					_this.opacityStyle = 1
				}else if(opacityStyle < 0.2) {
					_this.opacityStyle = 0
				}
			},
			jumpAddressAction() {
				
			},
			jumpDetailsAction() {
				
			},
			cancelAction() {
				
			},
			paymentAction() {
				
			}
		}
	}
</script>

<style lang="scss">
	@import './orderDetails.scss';
</style>
